import React from "react"
import { myNav} from "../../utils/interface"
interface Iprops{
    navList:myNav[]
    setCarIndex:Function
    carIndex:number,
}
const HomeTab:React.FC<Iprops> = (props) =>{

    function tab(e: React.MouseEvent<HTMLElement, MouseEvent>) {
        if (e.target !== e.currentTarget) {
            let num = parseInt((e.target as HTMLElement).dataset.index || '0')
            props.setCarIndex(num)
        }
    }
    return  <section className='nav' onClick={tab}>
    {
       props.navList.map((item, index) => {
            return <div key={index} className={props.carIndex === index ? 'active tabs' : 'tabs'} data-index={index}>
                {item.name}
            </div>
        })
    }
</section>
}
export default HomeTab